<!-- 选择器输入框 -->
<template>
  <el-input
    v-model="input"
    :placeholder="placeholder"
    class="input-with-select"
  >
    <template #prepend>
      <el-select
        v-model="select"
        :style="'width:'+ props.width"
        @change="change"
      >
        <el-option
          v-for="item in props.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </template>
  </el-input>
</template>
<script>
export default {
  name: 'AppSelectInput'
}
</script>
<script setup>
const props = defineProps({
  options: {
    type: Array,
    default: () => []
  },
  // select选择器宽度
  width: {
    type: String,
    default: '110px'
  }
})

const input = ref('')
const placeholder = ref('请输入内容')

const select = ref('')

const change = (val) => {
  placeholder.value = '请输入' + props.options.filter((item) => item.value === val)[0].label
}

// watch(() => props.options, () => {
//   if (!props.options.length) return
//   select.value = props.options[0].value
//   change(select.value)
// }, {
//   immediate: true
// })

onMounted(() => {
  if (!props.options.length) return
  select.value = props.options[0].value
  change(select.value)
})

const getValue = () => ({
  [select.value]: input.value
})

defineExpose({
  getValue
})

</script>

<style scoped lang='scss'>
:deep(.el-input-group__prepend) {
  background-color: var(--el-fill-color-blank);
}
</style>
